<template>
  <view class="promotionDetailsFacilitator" v-if="!loading">
    <!-- 订单状态 -->
    <view class="order-status">
      <text class="text">{{res.statusStr}}</text>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-info">
      <!-- 用户信息 -->
      <view class="userinfo" @click="onJumpUser">
        <view class="left">
        	<image class="avatar" :src="res.headImg"></image>
        	<text style="nickname">{{res.name}}</text>
        	<view class="flex flex-ai-c">
        		<view style="margin-left: 20rpx;" class="flex" v-if="res.isPartner">
        			<image src="https://files.yzsheng.com/client/order/hehuorenicon.png" style="width: 45rpx;height: 41rpx;"></image>
        		</view>
        		<view style="margin-left: 20rpx;" class="flex" v-if="res.isCarOwner">
        			<image src="https://files.yzsheng.com/client/order/chebiao.png" style="width: 45rpx;height: 41rpx;"></image>
        		</view>
        	</view>
        </view>
        <view>
        	<u-icon name="arrow-right" color="#999"></u-icon>
        </view>
      </view>
      
      <!-- 店铺信息 -->
      <view class="store-info" @click="onJumpStore">
        <i-icon icon="icondianpu" color="#FBB000" size="32rpx"></i-icon>
        <text class="title">{{res.storeName}}</text>
        	<u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
      </view>
      
      <!-- 车辆信息 -->
      <view class="car-info">
        <image class="img" :src="res.carImg"></image>
        <view class="info">
          <view class="title"><text>{{res.carName}}</text></view>
          <view class="price">
            <text>厂家指导价：<text class="mark-price">{{res.factoryPrice}}万</text></text>
          </view>
        </view>
      </view>
      
      <!-- 配置信息 -->
      <view class="config-info">
        <text class="label">外观内饰：</text>
        <view class="info">
          <view class="round" :style="{'background-color': res.color.outerColour.colorCoding}"></view>
          <text class="text">外观 {{res.color.outerColour.color}} + 内饰 {{res.color.inColour.color}}</text>
          <block v-for="(item, index) in res.color.inColour.neiColor" :key="index">
          <view class="round" :style="{'background-color': item}"></view>
          </block>
        </view>
      </view>
      
      <!-- 联系 -->
      <view class="cotact-btn">
        <view class="btn" @click="imclick(res)">
          <i-icon icon="iconxiaoxi" size="28rpx" color="#333"></i-icon>
          <text class="text">联系门店</text>
        </view>
        <view class="btn" @click="onClickCallPhone">
          <i-icon icon="icondianhua" size="26rpx" color="#333"></i-icon>
          <text class="text">致电门店</text>
        </view>
      </view>
      
      <!-- 价格 -->
      <view class="price-box">
        <view class="flex flex-ai-c">
          <u-icon name="question-circle" color="#FBB000" size="30"></u-icon>
          <text class="label">购车保证金:</text>
          <text class="price">￥<text class="strong">{{res.payMoney}}</text></text>
          <text class="label">合计:</text>
          <text class="price total">￥<text class="strong">{{res.payMoney}}</text></text>
        </view>
      </view>
      
    </view>
    
    <!-- 个人方案 -->
    <view class="plan-box">
      <view class="top flex flex-jc-sb flex-ai-c">
      	<view class="flex flex-ai-c">
      		<!-- 勾选 -->
      		<i-icon icon="iconiconfontxuanzhong" type="single" size="30rpx" color="#FBBC00"></i-icon>
      		<view style="margin-left: 12rpx;">个人户方案</view>
      	</view>
      	<view class="flex flex-ai-c" @click="show = true">
      		<view style="font-size: 22rpx;color: #999999;margin-right: 10rpx;">方案说明</view>
      		<view>
      			<i-icon icon="iconwenhao1" color="#B4B4B4" size="30rpx"></i-icon>
      		</view>
      	</view>
      </view>
      
      <view class="plan-details flex flex-ai-c">
      	<view class="item flex flex-dir-c flex-ai-c flex-jc-c">
      		<view class="num">{{res.payMentMoney}}万</view>
      		<view class="text">首付(20%)</view>
      	</view>
      	<view class="item flex flex-dir-c flex-ai-c flex-jc-c">
      		<view class="num">{{res.monthMoney}}</view>
      		<view class="text">月供</view>
      	</view>
      	<view class="item flex flex-dir-c flex-ai-c flex-jc-c">
      		<view class="num">{{res.monthCount}}</view>
      		<view class="text">期数</view>
      	</view>
      </view>
    </view>
    
    <!-- 订单核销资料 -->
    <view class="order-write-off" v-if="res.isServiceLook">
      <view class="title"><text>订单核销资料</text></view>
      <view class="content">
        <!-- 客户上传 -->
        <!-- <view class="customer-upload">
          <view class="top flex flex-ai-c flex-jc-sb">
            <text class="text">客户上传(可三选一上传）</text>
            <view class="btn" @click="onClickUploadInvoice" v-if="!res.orderImgUrl && (res.status === 7 || res.status === 2)"><text>代上传发票</text></view>
          </view>
          <view class="img-box">
            <view class="img" @click="onClickInvoiceImg">
              <image class="pic" src="https://files.yzsheng.com/client/order/fapiao@2x.png" v-if="!res.orderImgUrl && !invoiceImg"></image>
              <image class="pic" :src="res.orderImgUrl" mode="" v-if="res.orderImgUrl"></image>
              <image class="pic" :src="invoiceImg" mode="" v-else-if="invoiceImg"></image>
            </view>
            <view class="text"><text>机动车销售统一发票</text></view>
          </view>
        </view> -->
        <view class="sales-upload">
          <view class="top flex flex-ai-c flex-jc-sb">
            <text class="text">客户上传(可三选一上传）</text>
            <view class="btn" @click="onSubmitInfo" v-if="res.A === 7"><text>代上传发票</text></view>
          </view>
          <!-- <view class="upload-one">
            <view class="cell flex flex-ai-c flex-jc-sb">
              <text class="label">车辆成本价</text>
              <view class="flex flex-ai-c" v-if="res.serviceAddTime && res.serviceLookInfo.differencePrice">
                <u-icon name="arrow-downward" color="#6CB338" size="26rpx"></u-icon>
                <text class="value">{{res.serviceLookInfo.differencePrice}}元</text>
              </view>
              <text class="value" v-if="res.status !== 7 && !res.orderImgUrl">待上传</text>
              <view class="input-box" v-else>
                <u-input type="digit" input-align="right" :clearable="true" placeholder="请输入车辆成本价" v-model="invoiceForm.costPrice" v-if="res.status === 7"></u-input>
                <text class="value" v-else>{{res.serviceLookInfo.costPrice}}元</text>
              </view>
            </view>
            <view class="cell flex flex-ai-c flex-jc-sb">
              <text class="label">金融服务费</text>
              <text class="value" v-if="res.status !== 7 && !res.orderImgUrl">待上传</text>
              <view class="input-box" v-else>
                <u-input type="digit" input-align="right" :clearable="true" placeholder="请输入金融服务费" v-model="invoiceForm.moneyServicePrice" v-if="res.status === 7"></u-input>
                <text class="value" v-else>{{res.serviceLookInfo.financialServicePrice}}元</text>
              </view>
            </view>
            <view class="cell flex flex-ai-c flex-jc-sb">
              <text class="label">上户服务费</text>
              <text class="value" v-if="res.status !== 7 && !res.orderImgUrl">待上传</text>
              <view class="input-box" v-else>
                <u-input type="digit" input-align="right" :clearable="true" placeholder="请输入上户服务费" v-model="invoiceForm.registionPrice" v-if="res.status === 7"></u-input>
                <text class="value" v-else>{{res.serviceLookInfo.registrationPrice}}元</text>
              </view>
            </view>
            
            <view class="cell flex flex-ai-c flex-jc-sb" v-if="res.orderImgUrl && res.serviceAddTime">
              <text class="label">其他费用</text>
              <view class="input-box">
                <text class="value">{{res.serviceLookInfo.otherPrice}}元</text>
              </view>
            </view>
          </view> -->
          
          <view class="upload-two flex flex-wrap-w">
            <view class="cell flex flex-dir-c flex-ai-c">
              <view class="img" @click="onClickInvoiceFormImg('clientInvoiceImg')">
                <image class="pic" src="https://files.yzsheng.com/client/order/fapiao@2x.png" v-if="!invoiceForm.clientInvoiceImg  && !res.serviceLookInfo.clientInvoiceImg"></image>
                <image class="pic" :src="res.serviceLookInfo.clientInvoiceImg" mode="" v-if="res.serviceLookInfo && res.serviceLookInfo.clientInvoiceImg"></image>
                <image class="pic" :src="invoiceForm.clientInvoiceImg" mode="" v-else-if="invoiceForm.clientInvoiceImg"></image>
              </view>
              <view class="text"><text>机动车销售统一发票</text></view>
            </view>
            <view class="cell flex flex-dir-c flex-ai-c">
              <view class="img" @click="onClickInvoiceFormImg('clientDrivingImg')">
                <image class="pic" src="https://files.yzsheng.com/client/order/fapiao@2x.png" v-if="!invoiceForm.clientDrivingImg  && !res.serviceLookInfo.clientDrivingImg"></image>
                <image class="pic" :src="res.serviceLookInfo.clientDrivingImg" mode="" v-if="res.serviceLookInfo && res.serviceLookInfo.clientDrivingImg"></image>
                <image class="pic" :src="invoiceForm.clientDrivingImg" mode="" v-else-if="invoiceForm.clientDrivingImg"></image>
              </view>
              <view class="text"><text>行驶证详情页</text></view>
            </view>
            <view class="cell flex flex-dir-c flex-ai-c">
              <view class="img" @click="onClickInvoiceFormImg('clientInsuranceImg')">
                <image class="pic" src="https://files.yzsheng.com/client/order/fapiao@2x.png" v-if="!invoiceForm.clientInsuranceImg  && !res.serviceLookInfo.clientInsuranceImg"></image>
                <image class="pic" :src="res.serviceLookInfo.clientInsuranceImg" mode="" v-if="res.serviceLookInfo && res.serviceLookInfo.clientInsuranceImg"></image>
                <image class="pic" :src="invoiceForm.clientInsuranceImg" mode="" v-else-if="invoiceForm.clientInsuranceImg"></image>
              </view>
              <view class="text"><text>保单</text></view>
            </view>
          </view>
          
        </view>
        
        <!-- 销售上传 -->
        <view class="sales-upload border">
          <view class="top flex flex-ai-c flex-jc-sb">
            <text class="text">销售方上传(可三选一上传）</text>
          </view>
          <!-- <view class="upload-one">
            <view class="cell flex flex-ai-c flex-jc-sb">
              <text class="label">车辆成本价</text>
              <view class="flex flex-ai-c" v-if="res.serviceAddTime && res.serviceLookInfo.differencePrice">
                <u-icon name="arrow-downward" color="#6CB338" size="26rpx"></u-icon>
                <text class="value">{{res.serviceLookInfo.differencePrice}}元</text>
              </view>
              <text class="value" v-if="res.status !== 7 && !res.orderImgUrl">待上传</text>
              <view class="input-box" v-else>
                <u-input type="digit" input-align="right" :clearable="true" placeholder="请输入车辆成本价" v-model="invoiceForm.costPrice" v-if="res.status === 7"></u-input>
                <text class="value" v-else>{{res.serviceLookInfo.costPrice}}元</text>
              </view>
            </view>
            <view class="cell flex flex-ai-c flex-jc-sb">
              <text class="label">金融服务费</text>
              <text class="value" v-if="res.status !== 7 && !res.orderImgUrl">待上传</text>
              <view class="input-box" v-else>
                <u-input type="digit" input-align="right" :clearable="true" placeholder="请输入金融服务费" v-model="invoiceForm.moneyServicePrice" v-if="res.status === 7"></u-input>
                <text class="value" v-else>{{res.serviceLookInfo.financialServicePrice}}元</text>
              </view>
            </view>
            <view class="cell flex flex-ai-c flex-jc-sb">
              <text class="label">上户服务费</text>
              <text class="value" v-if="res.status !== 7 && !res.orderImgUrl">待上传</text>
              <view class="input-box" v-else>
                <u-input type="digit" input-align="right" :clearable="true" placeholder="请输入上户服务费" v-model="invoiceForm.registionPrice" v-if="res.status === 7"></u-input>
                <text class="value" v-else>{{res.serviceLookInfo.registrationPrice}}元</text>
              </view>
            </view>
            
            <view class="cell flex flex-ai-c flex-jc-sb" v-if="res.orderImgUrl && res.serviceAddTime">
              <text class="label">其他费用</text>
              <view class="input-box">
                <text class="value">{{res.serviceLookInfo.otherPrice}}元</text>
              </view>
            </view>
          </view> -->
          
          <view class="upload-two flex flex-wrap-w">
            <view class="cell flex flex-dir-c flex-ai-c">
              <view class="img">
                <image class="pic" src="https://files.yzsheng.com/client/order/fapiao@2x.png" v-if="!invoiceForm.businessInvoiceImg  && !res.serviceLookInfo.businessInvoiceImg"></image>
                <image class="pic" :src="res.serviceLookInfo.businessInvoiceImg" mode="" v-if="res.serviceLookInfo && res.serviceLookInfo.businessInvoiceImg"></image>
                <image class="pic" :src="invoiceForm.businessInvoiceImg" mode="" v-else-if="invoiceForm.businessInvoiceImg"></image>
              </view>
              <view class="text"><text>机动车销售统一发票</text></view>
            </view>
            <view class="cell flex flex-dir-c flex-ai-c">
              <view class="img">
                <image class="pic" src="https://files.yzsheng.com/client/order/fapiao@2x.png" v-if="!invoiceForm.businessDrivingImg  && !res.serviceLookInfo.businessDrivingImg"></image>
                <image class="pic" :src="res.serviceLookInfo.businessDrivingImg" mode="" v-if="res.serviceLookInfo && res.serviceLookInfo.businessDrivingImg"></image>
                <image class="pic" :src="invoiceForm.businessDrivingImg" mode="" v-else-if="invoiceForm.businessDrivingImg"></image>
              </view>
              <view class="text"><text>行驶证详情页</text></view>
            </view>
            <view class="cell flex flex-dir-c flex-ai-c">
              <view class="img">
                <image class="pic" src="https://files.yzsheng.com/client/order/fapiao@2x.png" v-if="!invoiceForm.businessInsuranceImg  && !res.serviceLookInfo.businessInsuranceImg"></image>
                <image class="pic" :src="res.serviceLookInfo.businessInsuranceImg" mode="" v-if="res.serviceLookInfo && res.serviceLookInfo.businessInsuranceImg"></image>
                <image class="pic" :src="invoiceForm.businessInsuranceImg" mode="" v-else-if="invoiceForm.businessInsuranceImg"></image>
              </view>
              <view class="text"><text>保单</text></view>
            </view>
            
          </view>
          
        </view>
        
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-info-box">
      <view class="title"><text>订单信息</text></view>
      <view class="content">
        <view class="cell flex flex-ai-c">
          <text class="label">流水号：</text>
          <text class="value">{{res.orderNo}}</text>
          <text class="copy" @click="onClickCopyOrderSN">复制</text>
        </view>
        <view class="cell flex flex-ai-c" v-if="res.getCarTime">
          <text class="label">提车时间：</text>
          <text class="value">{{res.getCarTime}}</text>
        </view>
        <view class="cell flex flex-ai-c" v-if="res.clientAddTime">
          <text class="label">上传发票：</text>
          <text class="value">{{res.clientAddTime}}</text>
        </view>
        <view class="cell flex flex-ai-c" v-if="res.storeAddTime">
          <text class="label">上传资料：</text>
          <text class="value">{{res.storeAddTime}}</text>
        </view>
        <view class="cell flex flex-ai-c" v-if="res.serviceAddTime">
          <text class="label">服务商审核：</text>
          <text class="value">{{res.serviceAddTime}}</text>
        </view>
        <view class="cell flex flex-ai-c" v-if="res.orderCompleteTime">
          <text class="label">平台审核：</text>
          <text class="value">{{res.orderCompleteTime}}</text>
        </view>
      </view>
    </view>
    
    <!-- 提交资料按钮 -->
    <view class="btn-submit flex flex-ai-c flex-jc-c" @click="onSubmitInfo" v-if="res.status === 7"><text>代上传发票</text></view>
    
    
    <!-- 方案说明 -->
    <u-popup v-model="show" border-radius="30" mode="bottom" :safe-area-inset-bottom="true" :closeable="true" height="490rpx">
    	<view class="popup">
    		<view class="title">个人方案</view>
    		<view class="content">
    			个人户方案，是7迈车采用常规银行及厂家金融方案模式，由具备分期购车特许资质的银行、厂家金融为客户提供的一种分期购车服务。
    			客户以分期支付的方式，以较低的门槛享受到汽车使用权和所有权。
    		</view>
    	</view>
    
    </u-popup>
  </view>
</template>

<script src="./promotionDetailsFacilitator"></script>

<style lang="scss">
@import './promotionDetailsFacilitator.scss';
</style>
